<template>
	<view class="content-class" :style="{ paddingTop: statusBarHeight + 'px' }">
		<u-navbar leftIconColor="#fff" bgColor="#1B1B1B" title="血氧浓度" :autoBack="true" @rightClick="skipDescribe">
			<u-icon color="#fff" slot="right" name="question-circle" size="18"></u-icon>
		</u-navbar>
		<u-tabs :activeStyle="{
		            color: '#0B0F12',
					background: 'linear-gradient( 90deg, #FFD8BB 0%, #F0986A 100%)',
					borderRadius: '16px',
					fontSize:'12px',
					whiteSpace: 'nowrap',
		        }" :inactiveStyle="{
		            color: '#fff',
					fontSize:'12px',
					whiteSpace: 'nowrap'
		        }" :list="tabList" @click="tabClick" :current="activeIndex"></u-tabs>
		<u-row justify="space-between" style="margin: 20px 0px;">
			<u-image style="transform: rotate(180deg);margin-left:10px" width="20px" height="20px" src="../../static/images/measuring/arrow.png"></u-image>
			<span style="font-size: 16px;color:#999;font-weight: bold;" v-if="tabList[activeIndex].data">{{tabList[activeIndex].data.time}}</span>
			<u-image style="margin-right:10px" width="20px" height="20px" src="../../static/images/measuring/arrow.png"></u-image>
		</u-row>
		<view v-if="activeIndex == 0">
			<u-row justify="space-between" style="margin: 20px 0px;">
				<view class="tj-time">
					<span>上次统计时间</span>
					<view>11:40</view>
				</view>
				<view style="font-size: 50px;">
					98
					<span style="font-size: 16px;margin-left: 6px;">%</span>
				</view>
				<view class="tj-time">
					<span>点击刷新</span>
					<u-icon class="refresh" name="reload" color="#fff" size="17"></u-icon>
				</view>
			</u-row>
			<charts v-if="!loading" :option="option" id="BloodOxygen1" :height="240"></charts>
			<u-row justify="space-evenly">
				<view v-for="i in option3" :key="i.title" class="item-type">
					<view class="dot" :style="{backgroundColor:i.color}"></view>
					{{i.title}}
				</view>
			</u-row>
		</view>
		<view v-else>
			<u-row justify="center">
				<view style="color: #999;margin-top: 20px;">
					平均每天
				</view>
				<view style="font-size: 50px;margin:0px 6px">
					98
					<span style="font-size: 16px">%</span>
				</view>
			</u-row>
			<charts v-if="!loading" :option="option2" id="BloodOxygen2" :height="240"></charts>
		</view>
		<u-row class="health-info">
			<u-col :span="4" v-for="i in cardList" :key="i.title">
				<view class="sport-card">
					<u-row>
						<u-image style="margin-right: 3px;" width="11px" height="11px" :src="i.icon"></u-image>
						{{i.title}}
					</u-row>
					<view v-if="i.unit1" class="number">
						{{i.subTitle ? i.subTitle.split('h')[0]:'' }}<span>{{i.unit}}</span>{{i.subTitle ? i.subTitle.split('h')[1].replace('min',''):'' }}<span>{{i.unit1}}</span>
					</view>
					<view v-else class="number">{{i.subTitle }}<span>{{i.unit}}</span></view>
				</view>
			</u-col>
		</u-row>
		<u-row justify="space-between" class="xy-status">
			<u-row>
				<u-image style="margin-right: 5px;" width="18px" height="18px" src="../../static/images/homePage/xy.png"></u-image>
				月均血氧状态
			</u-row>
			<u-row>
				<u--text text="正常" color="#05A167"></u--text>
			</u-row>
		</u-row>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		getRandomNumber
	} from "@/utils/index.js"
	export default {
		data() {
			return {
				loading: true,
				option3: [{
					title: '0-90%',
					color: '#FF2B2C',
				}, {
					title: '90-94%',
					color: '#54D7A5',
				}, {
					title: '95-100%',
					color: '#FFD8BB',
				}],
				option: {},
				option2: {},
				activeIndex: 0,
				tabList: [{
					name: '日',
					data: {
						time: '2025-02-12'
					}
				}, {
					name: '周',
					data: {
						time: '2025-02-12至2025-02-01'
					}
				}, {
					name: '月',
					data: {
						time: '2025-02-12至2025-02-01'
					}
				}, {
					name: '6个月',
					data: {
						time: '2025-02-12至2025-02-01'
					}
				}],
				cardList: [{
					title: '平均血氧',
					subTitle: '93',
					icon: require("../../static/images/ai/smzl.png"),
					unit: '%'
				}, {
					title: '最低血氧',
					icon: require("../../static/images/ai/pjxy.png"),
					subTitle: '93',
					unit: '%'
				}, {
					title: '最高血氧',
					icon: require("../../static/images/ai/pjxy.png"),
					subTitle: '98',
					unit: '%'
				}]
			}
		},
		computed: {
			...mapGetters(["statusBarHeight"]),
		},
		components: {},
		onLoad() {
			this.tabClick({
				index: this.activeIndex
			})

		},
		methods: {
			skipDescribe() {
				uni.navigateTo({
					url: "/pages/PublicPage/PublicPage?pageConfig=" + JSON.stringify({
						page: 'Describe',
						name: '血氧浓度说明',
					})
				})
			},
			loadData() {
				this.loading = true
				if (this.activeIndex == 0) {
					this.option = {
						grid: {
							top: "middle",
							left: "20px",
							right: "10px",
							height: "80%",
							top: '30px',
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: ['00:00', '06:00', '12:00', '18:00', '23:00'],
							axisLine: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},
							boundaryGap: true,
						},
						yAxis: {
							name: '%',
							nameLocation: 'end',
							nameTextStyle: {
								color: "#999",
								fontSize: 10,
								padding: [0, -25, 0, 0]
							},
							position: 'right',
							type: 'value',
							min: 75,
							splitNumber: 4,
							max: 100,
							splitLine: {
								show: true,
								lineStyle: {
									type: "dashed",
									color: "rgba(255,255,255,0.2)",
								},
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},

						},
						series: [{
							data: [50, 30, 85, 28, 100, 47, 60],
							type: 'bar',
							barWidth: 10,
							zlevel: 10,
							symbolSize: 0,
							itemStyle: {
								normal: {
									color: '#FF2B2C',
									barBorderRadius: [30, 30, 0, 0],
									label: {
										show: false, //开启显示
										position: 'top', //在上方显示
										textStyle: {
											//数值样式
											color: 'rgba(31, 129, 255, 1)',
											fontSize: 12,
											fontWeight: 400,
										},
									},
								}
							},
						}]
					}
					this.option.xAxis.data = this.generate24HourArray(1); // 每 6 小时生成一个时间点
					this.option.series[0].data = getRandomNumber(50, 100, 24)
					this.option.series[0].itemStyle.normal.color = (params) => {
						const value = params.value;
						if (value > 0 && value < 91) {
							return '#FF2B2C';
						} else if (value > 90 && value < 95) {
							return '#54D7A5';
						} else {
							return '#FFD8BB';
						}
					}
				} else if (this.activeIndex == 1) {
					this.option2 = {
						grid: {
							top: "middle",
							left: "20px",
							right: "10px",
							height: "80%",
							top: '30px',
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: ['周一', '06:00', '12:00', '18:00', '23:00'],
							axisLine: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},
							boundaryGap: true,
						},
						yAxis: {
							name: '%',
							nameLocation: 'end',
							nameTextStyle: {
								color: "#999",
								fontSize: 10,
								padding: [0, -25, 0, 0]
							},
							position: 'right',
							type: 'value',
							min: 75,
							splitNumber: 4,
							max: 100,
							splitLine: {
								show: true,
								lineStyle: {
									type: "dashed",
									color: "rgba(255,255,255,0.2)",
								},
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},

						},
						series: [{
							data: [50, 30, 85, 28, 100, 47, 60],
							type: 'bar',
							barWidth: 10,
							zlevel: 10,
							symbolSize: 0,
							itemStyle: {
								normal: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: '#02A166'
										}, {
											offset: 1,
											color: '#F3D2BA'
										}]
									},
									barBorderRadius: [30, 30, 0, 0],
									label: {
										show: false, //开启显示
										position: 'top', //在上方显示
										textStyle: {
											//数值样式
											color: 'rgba(31, 129, 255, 1)',
											fontSize: 12,
											fontWeight: 400,
										},
									},
								}
							},
						}]
					}
					this.option2.xAxis.data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日', ]
					this.option2.series[0].data = getRandomNumber(50, 100, 7)
				} else {
					this.option2 = {
						grid: {
							top: "middle",
							left: "20px",
							right: "10px",
							height: "80%",
							top: '30px',
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: ['周一', '06:00', '12:00', '18:00', '23:00'],
							axisLine: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px',
								interval: 4 // 每4个显示一个标签
							},
							boundaryGap: true,
						},
						yAxis: {
							name: '摄氏度',
							nameLocation: 'end',
							nameTextStyle: {
								color: "#999",
								fontSize: 10,
								padding: [0, -25, 0, 0]
							},
							position: 'right',
							type: 'value',
							min: 75,
							splitNumber: 4,
							max: 100,
							splitLine: {
								show: true,
								lineStyle: {
									type: "dashed",
									color: "rgba(255,255,255,0.2)",
								},
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},

						},
						series: [{
							data: [150, 230, 224, 218, 135, 147, 260],
							type: 'line',
							symbolSize: 0,
							lineStyle: {
								width: 1,
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#02A166' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#FFD8BB' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
						}]
					}
					let date = []
					for (var i = 1; i < 31; i++) {
						let item = i.toString().length > 1 ? i : `0${i}`
						date.push(item)
					}
					this.option2.xAxis.data = date
					this.option2.series[0].data = getRandomNumber(80, 100, 30)
				}
				this.$nextTick(() => {
					this.loading = false
				})
			},
			generate24HourArray(interval = 6) {
				const hours = [];
				for (let hour = 0; hour < 24; hour += interval) {
					// 格式化小时和分钟，确保两位数
					const formattedHour = String(hour).padStart(2, '0');
					const time = `${formattedHour}:00`; // 固定分钟为 '00'
					hours.push(time);
				}
				return hours;
			},
			tabClick(e) {
				this.activeIndex = e.index
				this.loadData()

			}
		}
	}
</script>

<style scoped lang="scss">
	.content-class {
		padding-left: 16px;
		padding-right: 16px;

		.tj-time {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-weight: bold;

			span {
				font-size: 12px;
				color: #999;
				margin-bottom: 6px;
				font-weight: normal;
			}
		}

		.item-type {
			display: inline-flex;
			align-items: center;
			font-size: 10px;
			margin-right: 5px;
			margin-bottom: 20px;

			.dot {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				margin-right: 6px;
			}
		}

		.xy-status {
			background: #1B1B1B;
			border-radius: 12px;
			margin: 12px 0px;
			padding: 16px;
			font-size: 15px;
		}

		.health-info {
			background: #1B1B1B;
			border-radius: 6px;
			padding: 12px;
			margin-bottom: 12px;

			.sport-card {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
				color: #999999;

				.number {
					font-size: 20px;
					color: #FFFFFF;
					margin-top: 6px;

					span {
						font-size: 8px;
						margin: 0px 1px;
					}
				}
			}
		}

		.u-tabs {
			background-color: #1B1B1B;
			border-radius: 16px;
			margin: 20px 0px;

			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1;
				padding: 0px;

				height: 32px !important;

				.u-tabs__wrapper__nav__item__text {
					height: 100%;
					display: inline-flex;
					align-items: center;
					width: 100%;
					justify-content: center;
				}
			}

			::v-deep .u-tabs__wrapper__nav__line {
				display: none
			}
		}
	}
</style>